import { ITodoData } from "../../typings"
import Input, { IInputOptions } from './Subs/Input'
import List, { IListOpionts } from "./Subs/List"


class TodoList {
    private el: HTMLElement
    private todoData: ITodoData[]
    private input: Input
    private list: List
    private todoWrapper: HTMLElement

    constructor(el: HTMLElement, todoData: ITodoData[]) {
        this.el = el
        this.todoData = todoData
        this.todoWrapper = document.createElement('div');
    }

    public init() {
        this.createComponents()
        this.render()
        this.bindEvent()
    }

    private createComponents() {
        // 创建input节点
        this.input = new Input(<IInputOptions>{
            wrapperEl: this.todoWrapper,
            placeholderText: '请输入',
            buttonText: '增加'
        })

        // 创建list节点
        this.list = new List(<IListOpionts>{
            wrapperEl: this.todoWrapper,
            todoData: this.todoData
        })

        console.log('1.创建子节点');
    }

    private render() {
        this.input.render()
        this.list.render()
        this.el.appendChild(this.todoWrapper)
        // TodoList 就是外观组件。input 和 list 通过它与app间接关联
        console.log('2.把input、list节点汇入TodoList节点，然后把TodoList汇入app');
    }


    private bindEvent() {
        this.input.bindEvent()
        this.list.bindEvent()
        console.log('3.绑定事件函数');
    }
}

export default TodoList